<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"/>
    <title></title>
    <style type="text/css">
        html {
          height: 100%;
        }

        body {
          height: 100%;
          font-size: 16px;
          margin: 0;
          padding: 0 16px;
          word-wrap: break-word;
          word-break: break-all;
          background-color: #ffffff;
        }

        ul {
          margin: 0 !important;
          padding-left: 0 !important;
          list-style-position: inside;
        }

        li,
        p {
          margin: 0 !important;
        }

        table {
          border: 1px solid #ACACAC;
          border-collapse: collapse;
          table-layout: fixed;
        }

        th, td {
          border: 1px solid #ACACAC;
          word-wrap: break-word;
        }

        .container {
          line-height: 1.5;
          color: rgba(0, 10, 24, 1);
          margin: 0px 12px 12px 12px;
          min-height: 400px;
          outline-style: none;
          letter-spacing: 1px;
        }

         .container div,p,ul,ol,li,a,table, tbody, tr,th, td, img,h1,h2,h3,h4,h5 {
          max-width: 100% !important;
          width: auto !important;
          min-width:0 !important;
          position:static !important;
          padding: 0px !important;
        }

        ol {
          margin: 0 !important;
          padding-left: 20px !important;
          user-select: text;
        }

        .container img{
          display:inline-block !important;
        }

        .container img[data-media-type] {
          width: 100% !important;
          height: auto !important;
        }

        .container:empty:before {
          content: "开始编辑笔记内容";
          color: rgba(0, 10, 24, 0.3);
        }

        .header {
          width: 100%;
          position: relative;
        }

        .header .book {
          float: left;
        }

        .clear_fix:after {
          content: "";
          height: 0;
          line-height: 0;
          display: block;
          clear: both;
          visibility: hidden;
        }

        .header .books {
          /*min-width: 100px;*/
          height: 36px;
          display: inline-block;
        }

        .header .non_encrypt .book_icon {
          width: 12px;
          height: 12px;
          background: url("img/ic_notebook.png") no-repeat left center;
          background-size: 12px 12px;
          margin-top: 12px;
        }

        .header .encrypt .book_icon {
          width: 12px;
          height: 12px;
          background: url("img/ic_lockfast.png") no-repeat left center;
          background-size: 12px 12px;
          margin-top: 12px;
        }

        .header .non_operable .book_name {
          max-width: 18em;
          line-height: 36px;
          font-size: 12px;
          font-family: PingFang-SC-Regular;
          font-weight: bold;
          color: rgba(0, 10, 24, 0.5);
          margin-left: 4px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .header .operable .book_name {
          max-width: 18em;
          line-height: 36px;
          font-size: 12px;
          font-family: PingFang-SC-Regular;
          font-weight: bold;
          color: rgba(0, 10, 24, 0.75);
          margin-left: 4px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .header .arrow .book_arrow {
          width: 4px;
          height: 8px;
          background: url("img/ic_arrow.png") no-repeat left center;
          background-size: 4px 8px;
          margin-top: 14px;
          margin-left: 4px;
        }

        .header .non_arrow .book_arrow {
          width: 4px;
          height: 8px;
          margin-top: 14px;
          margin-left: 4px;
        }

        .header .non_only_read .book_arrow {
          width: 32px;
          height: 16px;
          background-size: 32px 16px;
          margin-top: 8px;
          margin-left: 8px;
        }

        .header .note_title {
          padding: 12px;
          min-height: 27px;
          line-height: 27px;
          max-height: none;
          color: rgba(0, 10, 24, 1);
          font-size: 20px;
          font-weight: bold;
          font-family: PingFang-SC-Regular;
          overflow: hidden;
          outline-style: none;
        }

        .header .note_title:empty:before {
          content: "请输入标题";
          color: rgba(0, 10, 24, 0.3);
          /* opacity: 0.54; */
        }

        .header .line1 {
          width: 100%;
          height: 1px;
          margin: 0px;
          background-color: rgba(0, 10, 24, 0.05);
          overflow: hidden;
        }

        webedithighlight {
          color: white;
          background-color: blue;
        }


    </style>
</head>

<body>
<div id="header" class="header">
    <!--    <div id="rangeClickListener">-->
    <!--      <div id="books" class="books non_encrypt operable non_arrow non_only_read clear_fix">-->
    <!--        <div id="book_icon" class="book book_icon"></div>-->
    <!--        <div id="book_name" class="book book_name"></div>-->
    <!--        <div class="book book_arrow"></div>-->
    <!--      </div>-->
    <!--    </div>-->
    <div id="line1" class="line1"></div>
    <div id="note_title" class="note_title" contenteditable="false"></div>
</div>
<div id="container" class="container" contenteditable="false"></div>
</body>
<script>
    var WE = {
      operable: true,
      editable: false,
      editState: false,
      uuid: '227e0f04b376171cbcc5e21cce909b8e',
      assetUrl: 'file:///android_asset/',
      size: 0,
      color: '#333333',
      imageIds: [],
      recordIds: [],
      attachList: {
        'image': 1,
        'record': 2
      },
      textSytle: {
        isBold: false,
        isUnderline: false,
        isStrikeThrough: false,
        justify: 0,
        listStyle: 0,
        recover: function () {
          this.isBold = false;
          this.isUnderline = false;
          this.isStrikeThrough = false;
          this.justify = 0;
          this.listStyle = 0;
        }
      },
      lastEditRange: undefined,
      autoScroll: false,
      editorHeight: 0
    }

    WE.container = document.getElementById("container");

    window.addEventListener('load', function (event) {
      window.android.templateLoad();
      WE.textContent = WE.container.innerText;
      WE.container.style.minHeight = window.screen.height - 122;
    }, false);

    WE.setFontSize = function (size) {
      document.execCommand('fontSize', false, size);
      WE.size = size;

    }

    WE.setColor = function (color) {
      document.execCommand('foreColor', false, color);
      WE.color = color;

    }

    WE.setFontBold = function () {
      document.execCommand('bold', false, null);
      WE.textSytle.isBold = !(WE.textSytle.isBold);
    }

    WE.setUnderline = function () {
      document.execCommand('underline', false, null);
      WE.textSytle.isUnderline = !(WE.textSytle.isUnderline);
      if (WE.textSytle.isStrikeThrough) {
        document.execCommand('strikeThrough', false, null);
        WE.textSytle.isStrikeThrough = false;
      }
    }

    WE.setStrikeThrough = function () {
      document.execCommand('strikeThrough', false, null);
      WE.textSytle.isStrikeThrough = !(WE.textSytle.isStrikeThrough);
      if (WE.textSytle.isUnderline) {
        document.execCommand('underline', false, null);
        WE.textSytle.isUnderline = false;
      }
    }

    WE.setJustifyLeft = function () {
      document.execCommand('justifyLeft', false, null);
      WE.textSytle.justify = 0;
    }

    WE.setJustifyCenter = function () {
      document.execCommand('justifyCenter', false, null);
      WE.textSytle.justify = 1;
    }

    WE.setJustifyRight = function () {
      document.execCommand('justifyRight', false, null);
      WE.textSytle.justify = 2;
    }

    WE.setInsertUnorderedList = function () {
     var currentNode;
      var selection = window.getSelection();
      if (selection.getRangeAt && selection.rangeCount) {
        currentNode = selection.getRangeAt(0).startContainer;
      }

      if (WE.textSytle.listStyle === 1) {
        var parentNode =currentNode.parentNode;
        while (parentNode) {
          if (parentNode.nodeName === "LI") {
            parentNode.removeAttribute("style");
            break;
          }
          parentNode = parentNode.parentNode;
        }
        WE.textSytle.listStyle = 0;
      } else {
        WE.textSytle.listStyle = 1;
      }
      document.execCommand('insertUnorderedList', false, null);
    }

    WE.setInsertOrderedList = function () {
     var currentNode;
      var selection = window.getSelection();
      if (selection.getRangeAt && selection.rangeCount) {
        currentNode = selection.getRangeAt(0).startContainer;
      }

      if (WE.textSytle.listStyle === 2) {
        var parentNode = currentNode.parentNode;
        while (parentNode) {
          if (parentNode.nodeName === "LI") {
            parentNode.removeAttribute("style");
            break;
          }
          parentNode = parentNode.parentNode;
        }
        WE.textSytle.listStyle = 0;
      } else {
        WE.textSytle.listStyle = 2;
      }
      document.execCommand('insertOrderedList', false, null);
    }

    WE.restoreFontStyle = function () {
      document.execCommand('foreColor', false, WE.color);
      if (WE.size > 0) {
        document.execCommand('fontSize', false, WE.size);
      }
     window.android.returnTextStyle(WE.size+WE.color);

    }

    WE.returnTextContent = function (type) {
    if(WE.editState){
        if (type == 0) {
        var content = WE.container.innerText;
         var   innerHtml = '';
        console.log("test  "+WE.container.innerHTML);
        if ( WE.container.innerHTML.toLowerCase().includes('&lt;'.toLowerCase())||WE.container.innerHTML.toLowerCase().includes('&gt;'.toLowerCase())) {
            innerHtml = WE.container.innerHTML=WE.container.innerHTML.replaceAll('&lt;', '<').replaceAll('&gt;', '>');
        }else{
            innerHtml = WE.container.innerHTML;
        }
        if (content == "" || content != WE.textContent) {
          WE.textContent = content;
          window.android.returnTextContent(type, content,innerHtml);
        }
      } else {
        var content = WE.noteTitle.innerText;
        var innerHtml = WE.container.innerHTML;
        if (content != WE.titleContent) {
          WE.titleContent = content;
          window.android.returnTextContent(type, content,innerHtml);
        }
      }
    }else{
        if (type == 0) {
        var content = WE.container.innerText;
        var innerHtml = WE.container.innerHTML;
        if (content == "" || content != WE.textContent) {
          WE.textContent = content;
          window.android.returnTextContent(type, content,innerHtml);
        }
      } else {
        var content = WE.noteTitle.innerText;
        var innerHtml = WE.container.innerHTML;
        if (content != WE.titleContent) {
          WE.titleContent = content;
          window.android.returnTextContent(type, content,innerHtml);
        }
      }
    }

    }

    WE.cursorToTheEnd = function(obj){
      if (window.getSelection) {
        obj.focus();
        var range = window.getSelection();
        range.selectAllChildren(obj);
        range.collapseToEnd();  //光标移至最后
      }
      else if (document.selection) {
        var range = document.selection.createRange();
        range.moveToElementText(obj);
        range.collapse(false);  //光标移至最后
        range.select();
      }
    }

    WE.container.addEventListener('keydown', function (event) {
      WE.restoreFontStyle();

    }, false);

    WE.container.addEventListener('input', function (event) {
      WE.editState = true;
      WE.returnTextContent(0);
        WE.scrollToShowCursor();
      if (WE.imageIds.length > 0 || WE.recordIds.length > 0) {
        var i, attachId;
        for (i = 0; i < WE.imageIds.length; i++) {
          attachId = WE.imageIds[i];
          if (document.getElementById(attachId) == null) {
            WE.imageIds.splice(i, 1);
            window.android.deleteAttach(attachId);
            return;
          }
        }
        for (i = 0; i < WE.recordIds.length; i++) {
          attachId = WE.recordIds[i];
          if (document.getElementById(attachId) == null) {
            WE.recordIds.splice(i, 1);
            window.android.deleteAttach(attachId);
            return;
          }
        }
      }
    }, true);
  var conFoucFunction = function (event) {
      window.android.returnFocus(0, true);
  <!--    多行文字溢出显示省略号...-->
  <!--    WE.noteTitle.style="display: -webkit-box;-webkit-line-clamp: 3; -webkit-box-orient: vertical;"-->
    };
    WE.container.addEventListener('focus', conFoucFunction, false);

    WE.container.addEventListener('blur', function (event) {
      var selection = window.getSelection();
      WE.lastEditRange = selection.getRangeAt(0);
      window.android.returnFocus(0, false);
      WE.noteTitle.style = "" ;
    }, false);

    function containerFunction(event) {
      if (WE.operable && event.target.getAttribute('data-media-type') == null && event.target.nodeName !==
      'A') {
        if (!WE.editable) {
          WE.editable = true;
          WE.noteTitle.contentEditable = true;
          WE.container.contentEditable = true;
          WE.container.focus();
        }
      }
    }
    WE.container.addEventListener('click',containerFunction, false);

    WE.container.addEventListener('paste', function (event) {
      var content = window.android.getClipboardContent();
      if (content) {
        var parent = document.createElement('div'),
          attachs,
          elements,
          img,
          element,
          needInsertHtml = false;
        parent.innerHTML = content;
        attachs = parent.querySelectorAll('img[data-media-type]');
        if (attachs) {
          needInsertHtml = true;
          for (var i = 0; i < attachs.length; i++) {
            img = attachs[i];
            img.parentNode.removeChild(img);
          }
        }
        elements = parent.querySelectorAll("#books,#book_name,#note_title,#container");
        if (elements) {
          needInsertHtml = true;
          for (var j = 0; j < elements.length; j++) {
            element = elements[j];
            element.removeAttribute("id");
            element.removeAttribute("style");
            element.removeAttribute("contenteditable");
          }
        }
        if (needInsertHtml) {
          event.preventDefault();
          document.execCommand('insertHtml', false, parent.innerHTML);
        }
        WE.setLinkClickListener();
      }
    }, true);

    WE.insertImage = function (id, imagePath, name) {
      if (WE.container!==document.activeElement) {
        WE.container.click();
        WE.cursorToTheEnd(WE.container);
      }
      var startNode = WE.getCurrentNode(),
        html;
      if (startNode.nodeName === "#text") {
        html = '<div><img class="attach_image" data-media-type="image" id="' + id + '" src="' + imagePath + '" alt="' + name + '" /></div><br>';
      } else {
        html = '<br><div><img class="attach_image" data-media-type="image" id="' + id + '" src="' + imagePath + '" alt="' + name + '" /></div><br>';
      }
      document.execCommand('insertHtml', false, html);
      WE.imageIds.push(id);
      var img = document.getElementById(id);
      img.addEventListener('click', function (event) {
        if (WE.operable) {
          window.android.clickAttach(id);
        }
      }, false);
    }

    WE.insertText = function (text) {
      if (WE.container!==document.activeElement) {
        WE.container.click();
        WE.cursorToTheEnd(WE.container);
      }
      WE.restoreFontStyle();
      document.execCommand('insertText', false, text);
    }

    WE.initHtml = function (html) {
      WE.container.innerHTML = html;
      var attaches = document.querySelectorAll('img[data-media-type]'),
        len = attaches.length,
        img,
        type,
        url;
      for (var i = 0; i < len; i++) {
        img = attaches[i];
        type = WE.attachList[img.getAttribute('data-media-type').toLowerCase()];
        url = window.android.getImageUrl(img.id,img.src);
        img.src = url;
        switch (type) {
          case WE.attachList['image']:
            WE.imageIds.push(img.id);
            break;
          case WE.attachList['record']:
            WE.recordIds.push(img.id);
            break;
          default:
            img.style.visibility = "hidden";
            break;
        }
        img.addEventListener('click', function (event) {
          if (WE.operable) {
            window.android.clickAttach(event.target.id);
          }
        }, false);
      }
      WE.setLinkClickListener();
      WE.returnTextContent(0);
      WE.returnTextContent(1);
      window.android.initHtmlComplete();

    }

    WE.setOperable = function (operable) {
      if (operable === "true") {
        WE.operable = true;
        document.body.removeEventListener('touchmove',bodyScroll, {passive: false});
      } else {
        WE.operable = false;
        document.body.addEventListener('touchmove', bodyScroll, { passive: false });
      }
      var booksClassList = WE.books.classList;
      if (WE.operable) {
         if (booksClassList.contains("non_operable")) {
           booksClassList.remove("non_operable");
         }
         if (!booksClassList.contains("operable")) {
           booksClassList.add("operable");
         }
       } else {
         if (booksClassList.contains("operable")) {
           booksClassList.remove("operable");
         }
         if (!booksClassList.contains("non_operable")) {
           booksClassList.add("non_operable");
         }
       }
    }

    function bodyScroll(event){
      event.preventDefault();
    }

    WE.setLinkClickListener = function () {
      var links = document.querySelectorAll("a"),
        link;
      for (var j = 0; j < links.length; j++) {
        link = links[j];
        link.addEventListener('click', function (event) {
          if (WE.operable) {
            window.android.clickLink(event.currentTarget.href);
            event.preventDefault();
            event.stopPropagation();
          }
        }, true);
      }
    };

    WE.updateImgSrc = function (id, path) {
      var img = document.getElementById(id);
      img.src = path;
    }

    WE.delete = function ()
    {
      document.execCommand('delete', false, null);
    }

    WE.insertParagraph = function ()
    {
      document.execCommand('insertParagraph', false, null);
    }

    WE.insertHtml = function (html) {
      document.execCommand('insertHtml', false, html);
      WE.setLinkClickListener();
    }

    WE.getHtml = function () {
      if (WE.keyword) {
        WE.setHighLightKeyword("");
      }
      var copyContainer = container.cloneNode(true);
      var imgs = copyContainer.querySelectorAll('.attach_image,.attach_record');
  <!--    var imgsAll = copyContainer.querySelectorAll("img"),imgNew;-->
  <!--    for (i = 0; i < imgsAll.length; i++) {-->
  <!--      imgNew = imgsAll[i];-->
  <!--      if(imgNew.src.startsWith('https')){-->
  <!--      imgNew.src = '=='+imgNew.src+'=='-->
  <!--      }-->
  <!--    }-->
      var i, img;
      for (i = 0; i < imgs.length; i++) {
        img = imgs[i];
        if(img.src.startsWith('https')){
        img.src = WE.uuid + img.id;

<!--        img.src = '=='+img.src+'=='-->
        }else{
       img.src = WE.uuid + img.id;

<!--        img.src ='=='+ WE.uuid + img.id+'==';-->
<!--        img.class ='=='+ img.class+'==';-->
<!--        img.alt ='=='+ img.alt+'==';-->
<!--        img.id ='=='+ img.id+'==';-->
        }
      }
      window.android.returnHtml(copyContainer.innerHTML);
    }

    WE.getImageIds = function () {
     WE.imageIds=[];
        var attaches = document.querySelectorAll('img[data-media-type]'),
        len = attaches.length,
        img,
        type;
      for (var i = 0; i < len; i++) {
        img = attaches[i];
        type = WE.attachList[img.getAttribute('data-media-type').toLowerCase()];
        switch (type) {
          case WE.attachList['image']:
            WE.imageIds.push(img.id);
            break;
          default:
            break;
        }
        }
      if (WE.imageIds.length > 0) {
        window.android.returnImageIds(WE.imageIds.join(','));
      } else {
        window.android.returnImageIds('');
      }
    }

    WE.insertRecord = function (id, imageBase64, name) {
      var html = '<div><img class="attach_record" data-media-type="record" id="' + id + '" src="data:image/jpeg;base64,' + imageBase64 + '" alt="' + name + '" /></div><br><br>';
      document.execCommand('insertHtml', false, html);
      WE.recordIds.push(id);
      var img = document.getElementById(id);
      img.addEventListener('click', function (event) {
        if (WE.operable) {
          window.android.clickAttach(id);
        }
      }, false);
    }
    WE.insertImgB64 = function (id, imageBase64, name) {
       var html = '<br><div><img class="attach_image" data-media-type="image" id="' + id + '" src=' + imageBase64 + ' alt="' + name + '" /></div><br>';
       document.execCommand('insertHtml', false, html);
      WE.imageIds.push(id);
      var img = document.getElementById(id);
      img.addEventListener('click', function (event) {
        if (WE.operable) {
          window.android.clickAttach(id);
        }
      }, false);
    }
    WE.readMode = function () {
        WE.container.removeEventListener('click', containerFunction, false);
        WE.noteTitle.removeEventListener('click',noteTitleFunction , false);
        WE.books.removeEventListener('click',booksClickFunction, false);
        WE.editable = false;
        WE.noteTitle.contentEditable = false;
        WE.noteTitle.blur();
        WE.container.contentEditable = false;
        WE.container.blur();

    }
    WE.insertRecordWithPath = function (id, imagePath, name) {
      if (WE.container!==document.activeElement) {
        WE.container.click();
        WE.cursorToTheEnd(WE.container);
      }
      var html = '<div><img class="attach_record" data-media-type="record" id="' + id + '" src="' + imagePath + '" alt="' + name + '" /></div><br><br>';
      document.execCommand('insertHtml', false, html);
      WE.recordIds.push(id);
      var img = document.getElementById(id);
      img.addEventListener('click', function (event) {
        if (WE.operable) {
          window.android.clickAttach(id);
        }
      }, false);
    }

    WE.getEditState = function () {
      window.android.returnEditState(WE.editState);
    }

    WE.setEditState = function (state) {
      if (state === "true") {
        WE.editState = true;
      } else {
        WE.editState = false;
      }
    }

    /**
     * 设置只读或编辑模式
     * @param state
     */
    WE.setEditOrRead = function (state) {
      if (state === "true" && !WE.editable) {
        WE.editable = true;
        WE.noteTitle.contentEditable = true;
        WE.container.contentEditable = true;
        WE.container.focus();
      } else if (state === "false" && WE.editable) {
        WE.editable = false;
        WE.noteTitle.contentEditable = false;
        WE.noteTitle.blur();
        WE.container.contentEditable = false;
        WE.container.blur();
      }

    }

    /**
     * 设置隐藏头部标签分割线、内联图片图标、录音图标
     * @param state
     */
   WE.setTranslateViewStyle = function(){
<!--      WE.editable = true;-->
<!--      document.body.contentEditable='false'-->
<!--      document.getElementById("books").style.display = "none";-->
<!--      document.getElementById("line1").style.display = "none";-->

      var x = document.getElementsByClassName("attach_image");
      for (var i = 0; i < x.length; i++) {
         if(!x[i].alt.toLowerCase().includes('jpg'.toLowerCase())&&!x[i].alt.toLowerCase().includes('png'.toLowerCase())){
          x[i].style.visibility = "hidden";
         }
      }
      var y = document.getElementsByClassName("attach_record");
      for (var i = 0; i < y.length; i++) {
          y[i].style.visibility = "hidden";
      }
      var y1 = document.getElementsByClassName("attach_default");
      for (var i = 0; i < y1.length; i++) {
<!--            if(!y1[i].alt.toLowerCase().includes('jpg'.toLowerCase())&&!y1[i].alt.toLowerCase().includes('png'.toLowerCase())){-->
                     y1[i].style.visibility = "hidden";
<!--            }-->
      }
  <!--    document.body.style.backgroundColor = "white";-->
    }

    /**
     * 让container获取焦点
     */
    WE.getFocus = function () {
      WE.editable = true;
      WE.container.contentEditable = true;
      WE.container.focus();
    }

    /**
     * 获取笔记本尺寸(包括左边位置、上边位置，宽度和高度)
     */
    WE.getNoteBookSize = function ()
    {
      window.android.returnNoteBookSize(WE.books.offsetParent.offsetLeft, WE.books.offsetParent.offsetTop,
        WE.books.offsetWidth, WE.books.offsetHeight);
    }

    /**
     * 获取笔记头部高度
     */
    WE.getNoteHeadHeight = function ()
    {
      window.android.returnNoteHeadHeight(document.getElementById("header").offsetHeight);
    }

     /**
     * 获取笔记本默认笔记本高度
     */
    WE.getNoteHeadSize = function ()
    {
      //整个头部的高度，减去标题高度
      var height = (document.getElementById("header").offsetHeight  - document.getElementById("note_title").offsetHeight + 20) ;
      var height2 = WE.container.offsetHeight;
      var ret = [];
      ret.push(height);
      ret.push(window.screen.height);
      console.log("grass " + window.screen.height);
      return height + "-" + window.screen.height;
    }

    WE.getContentText = function ()
    {
      var content = WE.container.innerText;
      return content;
    }

    WE.undo = function()
    {
      var canUndo = document.execCommand('undo','false','false');
      return canUndo;
      //console.log("grass" + document.execCommand('undo'));
      //return document.execCommand('undo');
    }

      WE.redo = function()
    {
      var canRedo = document.execCommand('redo','false','false');
      return canRedo;
      //console.log("grass" + document.execCommand('redo'));
      // return document.execCommand('redo');
    }

    WE.setMinHeight = function (minHeight) {
      WE.container.style.minHeight = minHeight + 'px';
    }

    /**
     * 设置光标位置
     * @param pos
     */
    WE.setCursorPosition = function (pos) {
      if (!WE.editable) {
        WE.editable = true;
        WE.noteTitle.contentEditable = true;
        WE.container.contentEditable = true;
        WE.container.focus();
      }
      var walker = document.createTreeWalker(WE.container, NodeFilter.SHOW_ALL, function (node) {
          if ((node.nodeType == 3 && node.nodeValue.replace(/\s+/g, "") != '') || node.nodeName == 'IMG') {
            return NodeFilter.FILTER_ACCEPT;
          } else {
            return NodeFilter.FILTER_SKIP;
          }
        }, false),
        index = pos,
        startNode;
      var node = walker.firstChild();
      while (node) {
        if (node.nodeType == 3) {
          if (index > node.length) {
            index = index - node.length;
          } else {
            startNode = node;
            break;
          }
        } else {
          if (index > 1) {
            index = index - 1;
          } else {
            startNode = node.parentNode;
            break;
          }
        }
        node = walker.nextNode();
      }
      window.getSelection().removeAllRanges();
      var range = document.createRange();
      if (startNode) {
        range.setStart(startNode, index);
        range.setEnd(startNode, index);
      } else {
        range.selectNodeContents(WE.container);
      }
      window.getSelection().addRange(range);
      window.getSelection().collapseToEnd();
    }

    WE.books = document.getElementById("books");
    WE.noteTitle = document.getElementById("note_title");

    WE.getNoteTitle = function () {
      window.android.returnNoteTitle(WE.noteTitle.innerText);
    }
    WE.setReadMode = function(){
      window.android.returnNoteTitle("111111111111");
    }
    WE.setNoteTitle = function (title) {
      WE.noteTitle.innerHTML = title;
    }
    function setNoteTitle(title) {
      WE.setNoteTitle(title)
    }

    WE.noteTitle.addEventListener("input", function (event) {
      WE.editState = true;
      var titleArray = Array.from(WE.noteTitle.innerText);
      if(titleArray != null && titleArray != undefined && titleArray.length > 64)
      {
          WE.noteTitle.innerText = titleArray.slice(0, 64).join('');
          WE.cursorToTheEnd(WE.noteTitle);
          window.android.notifyTitleLengthLimit();
      }
      WE.returnTextContent(1);
    }, false);

    function noteTitleFunction() {
      if (WE.operable && !WE.editable) {
        WE.editable = true;
        WE.noteTitle.contentEditable = true;
        WE.noteTitle.focus();
        WE.container.contentEditable = true;
      }
    }
    WE.noteTitle.addEventListener('click',noteTitleFunction , false);

    WE.noteTitle.addEventListener('focus', function (event) {
      window.android.returnFocus(1, true);
    }, false);

    WE.noteTitle.addEventListener('blur', function (event) {
      var selection = window.getSelection();
      WE.lastEditRange = selection.getRangeAt(0);
      window.android.returnFocus(1, false);
    }, false);

    WE.setBooksInfo = function (type, name) {
      var bookName = document.getElementById("book_name"),
        booksClassList;
      bookName.innerText = name;
      booksClassList = WE.books.classList;
      if (WE.operable) {
        if (booksClassList.contains("non_operable")) {
          booksClassList.remove("non_operable");
        }
        if (!booksClassList.contains("operable")) {
          booksClassList.add("operable");
        }
      } else {
        if (booksClassList.contains("operable")) {
          booksClassList.remove("operable");
        }
        if (!booksClassList.contains("non_operable")) {
          booksClassList.add("non_operable");
        }
      }
      if (type == 0) {
        if (booksClassList.contains("encrypt")) {
          booksClassList.remove("encrypt");
        }
        if (!booksClassList.contains("non_encrypt")) {
          booksClassList.add("non_encrypt");
        }
        if (booksClassList.contains("non_arrow")) {
          booksClassList.remove("non_arrow");
        }
        if (!booksClassList.contains("arrow")) {
          booksClassList.add("arrow");
        }
        if (booksClassList.contains("non_only_read")) {
          booksClassList.remove("non_only_read");
        }
      } else if (type == 1) {
        if (booksClassList.contains("non_encrypt")) {
          booksClassList.remove("non_encrypt");
        }
        if (!booksClassList.contains("encrypt")) {
          booksClassList.add("encrypt");
        }
        if (booksClassList.contains("non_arrow")) {
          booksClassList.remove("non_arrow");
        }
        if (!booksClassList.contains("arrow")) {
          booksClassList.add("arrow");
        }
        if (booksClassList.contains("non_only_read")) {
          booksClassList.remove("non_only_read");
        }
      } else if (type == 3) {
         <!--废纸篓-->
        if (booksClassList.contains("encrypt")) {
          booksClassList.remove("encrypt");
        }
        if (!booksClassList.contains("non_encrypt")) {
          booksClassList.add("non_encrypt");
        }
        if (booksClassList.contains("non_arrow")) {
          booksClassList.remove("non_arrow");
        }
        if (booksClassList.contains("arrow")) {
          booksClassList.remove("arrow");
        }
        if (!booksClassList.contains("non_only_read")) {
          booksClassList.add("non_only_read");
        }
      } else {
        if (booksClassList.contains("encrypt")) {
          booksClassList.remove("encrypt");
        }
        if (!booksClassList.contains("non_encrypt")) {
          booksClassList.add("non_encrypt");
        }
        if (booksClassList.contains("arrow")) {
          booksClassList.remove("arrow");
        }
        if (!booksClassList.contains("non_arrow")) {
          booksClassList.add("non_arrow");
        }
        if (booksClassList.contains("non_only_read")) {
          booksClassList.remove("non_only_read");
        }
      }
    }

    function booksClickFunction(event) {
      if (WE.operable) {
        window.android.clickBooks();
      }
    }
<!--    WE.books.addEventListener('click',booksClickFunction, false);-->

    WE.restoreCursorPosition = function(){
      if (WE.lastEditRange) {
        var selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(WE.lastEditRange);
      }
    }

    WE.getCurrentNode = function () {
      var currentNode;
      var selection = window.getSelection();
      if (selection.getRangeAt && selection.rangeCount) {
        currentNode = selection.getRangeAt(0).startContainer;
      }
      return currentNode;
    };

    document.addEventListener("selectionchange", function (event) {
      var selection = window.getSelection();
      if (selection.getRangeAt && selection.rangeCount) {
        var range = selection.getRangeAt(0),
          textStyle = [],
          nodeName,
          align,
          decoration,
          fontWeight,
          targetNode = range.startContainer;
        WE.textSytle.recover();
        while (targetNode) {
          nodeName = targetNode.nodeName;
          if (nodeName == 'B' || nodeName == 'STRONG') {
            textStyle.push(nodeName);
            WE.textSytle.isBold = true;
          } else if (nodeName == 'U') {
            textStyle.push(nodeName);
            WE.textSytle.isUnderline = true;
          } else if (nodeName == 'STRIKE') {
            textStyle.push(nodeName);
            WE.textSytle.isStrikeThrough = true;
          } else if (nodeName == 'UL') {
            textStyle.push(nodeName);
            WE.textSytle.listStyle = 1;
          } else if (nodeName == 'OL') {
            textStyle.push(nodeName);
            WE.textSytle.listStyle = 2;
          } else if (targetNode.style) {
            align = targetNode.style.textAlign;
            if (align == 'center') {
              textStyle.push(align);
              WE.textSytle.justify = 1;
            } else if (align == 'right') {
              textStyle.push(align);
              WE.textSytle.justify = 2;
            }
            decoration = targetNode.style.textDecoration;
            if (decoration === 'underline') {
              textStyle.push(decoration);
              WE.textSytle.isUnderline = true;
            } else if (decoration === 'line-through') {
              textStyle.push(decoration);
              WE.textSytle.isStrikeThrough = true;
            }
            fontWeight = targetNode.style.fontWeight;
            if (fontWeight === "bold") {
              textStyle.push(fontWeight);
              WE.textSytle.isBold = true;
            }
          }
          targetNode = targetNode.parentNode;
        }
        window.android.returnTextStyle(textStyle.join(','));
        WE.scrollToShowCursor();
      }
    }, false);

    WE.scrollToShowCursor = function() {
      if(WE.autoScroll && WE.editorHeight > 0)
      {
        var delta = 0;
        if(WE.size == 2)
        {
          delta = 50;
        }
        else if(WE.size == 4 || WE.size == 3)
        {
          delta = 46;
        }
        else if(WE.size == 5)
        {
          delta = 36;
        }
        else if(WE.size == 6)
        {
          delta = 24;
        }
        delta = 0;
        delta += WE.noteTitle.offsetHeight;
        var position = WE.getCursorYPosition();
        var scrollTop = window.document.body.scrollTop;
        var contentHeight = WE.editorHeight - WE.container.offsetTop;
        if (position < scrollTop) {
            scrollTop = position;
            window.scrollTo(0, scrollTop);
        } else if (position > (scrollTop + contentHeight + delta)) {
            scrollTop = position - (contentHeight + delta);
            window.scrollTo(0, scrollTop);
        }
      }
    }

    WE.getCursorYPosition = function() {
      var selection = window.getSelection();
      var range = selection.getRangeAt(0);
      var span = document.createElement('span');
      range.insertNode(span);
      var offsetTop = span.offsetTop;
      span.parentNode.removeChild(span);
      return offsetTop;
    }

    WE.setAutoScroll = function(autoScroll) {
      try {
        WE.autoScroll = autoScroll;
      }
      catch(e) {
      }
    }

    WE.saveEditorHeight = function(editorHeight) {
      try {
        WE.editorHeight = editorHeight;
      }
      catch(e) {
      }
    }
    /**
     * 设置笔记本颜色、图标
     * @param color
     */
    WE.setBooksInfoColor = function(color) {
      var bookName = document.getElementById("book_name");
      var bookIcon = document.getElementsByClassName("book book_icon")[0];
      var bookArrow = document.getElementsByClassName("book book_arrow")[0];
      if ("#80000A18" === color) {
          bookName.style.color = 'rgba(0, 10, 24, 0.75)';
          bookArrow.style.backgroundImage = "url(img/ic_arrow.png)";
          if (bookName.innerText == "加密柜") {
              bookIcon.style.backgroundImage = "url(img/ic_lockfast.png)";
          } else if( bookName.innerText == "废纸篓"){
              bookIcon.style.backgroundImage = "url(img/notesdk_reyclebin_tag.webp)";
              bookArrow.style.backgroundImage = "url(img/notesdk_only_read_tag.png)";
          } else {
              bookIcon.style.backgroundImage = "url(img/ic_notebook.png)";
          }
      } else {
          bookName.style.color = color;
          if (bookName.innerText == "加密柜") {
              bookIcon.style.backgroundImage = "url(img/notesdk_icon_encryption_small_ash.png)";
          } else {
              bookIcon.style.backgroundImage = "url(img/icon_notebook_small_ash.png)";
          }
         bookArrow.style.backgroundImage = "url(img/notesdk_icon_arrow_disable.png)";
      }
    }

  /**
   * 设置只读模式
   * @param read
   */
 WE.setReadAble = function(read){
          window.android.returnTextContent("setReadAble", "content","innerHtml");

    if (read) {
          window.android.returnTextContent("setReadAble2", "content","innerHtml");

        WE.container.removeEventListener('click', containerFunction, false);
        WE.noteTitle.removeEventListener('click',noteTitleFunction , false);
        WE.books.removeEventListener('click',booksClickFunction, false);
        WE.editable = false;
        WE.noteTitle.contentEditable = false;
        WE.noteTitle.blur();
        WE.container.contentEditable = false;
        WE.container.blur();
    } else {
          window.android.returnTextContent("setReadAble3", "content","innerHtml");

        WE.container.addEventListener('click',containerFunction, false);
        WE.noteTitle.addEventListener('click',noteTitleFunction , false);
        WE.books.addEventListener('click',booksClickFunction, false);
    }
}



</script>

</html>
